<template>
  <div class="measurePointPage">
    <div class="left">
      <ContentWrap>
        <el-form
          class="-mb-15px"
          :model="queryDtuParam"
          ref="queryDtuFormRef"
          :inline="true"
          label-width="68px"
        >
  <!--        <el-form :inline="true" :model="queryDtuParam" class="demo-form-inline">-->
          <el-form-item label="DTU名称">
            <el-input v-model="queryDtuParam.dtuName" placeholder="DTU名称"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onDtuQuery">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="openAddDtuDialog" v-hasPermi="['measure:dtu:add']">新增</el-button>
          </el-form-item>
        </el-form>
      </ContentWrap>
      <ContentWrap>
        <div class="table-content">
        <el-table
          v-loading="loading"
          :data="dtuTableList"
          class="n-table--border"
          border
          highlight-current-row
          @row-click="updatePointDtuId"
          style="width: 100%; flex: 1"
          height="auto">
          <el-table-column
            show-overflow-tooltip
            type="selection"
            align="center"
            width="55"/>
<!--          <el-table-column prop="id" label="id"/>-->
          <el-table-column prop="dtuName" label="DTU名称"/>
          <el-table-column
            header-align="center"
            align="center"
            label="操作">
            <template  #default="scope">
              <div class="flex items-center justify-center">
                <el-button v-hasPermi="['measure:dtu:query']"  type="primary" link size="small" @click="viewDtu(scope.row.id)">查看</el-button>
                <el-button v-hasPermi="['measure:dtu:edit']"  type="primary" link size="small" @click="editDtu(scope.row.id)">修改</el-button>
                <el-button v-hasPermi="['measure:dtu:delete']"  type="primary" link size="small" @click="delDtu(scope.row.id)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <Pagination
          :total="dtuTotal"
          v-model:page="queryDtuParam.pageNo"
          v-model:limit="queryDtuParam.pageSize"
          @pagination="onDtuQuery"
        />
      </div>
      </ContentWrap>
    </div>
    <div class="right">
      <ContentWrap>
        <el-form :inline="true" :model="queryMeasurePointParam" class="demo-form-inline" ref="queryPointFormRef">
        <el-form-item label="测量点名称"  prop="measurePointName">
          <el-input v-model="queryMeasurePointParam.measurePointName" placeholder="测量点名称"/>
        </el-form-item>
        <el-form-item label="协议名称"  prop="measureProtocolName">
          <el-input v-model="queryMeasurePointParam.measureProtocolName" placeholder="协议名称"/>
        </el-form-item>
          <el-form-item label="DtuId" v-show="false"  prop="dtuInfoId">
            <el-input v-model="queryMeasurePointParam.dtuInfoId" placeholder="DtuId"/>
          </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onMeasureQuery">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="resetQuery">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="openAddMeasurePointDialog" v-hasPermi="['measure:point:add']">新增</el-button>
        </el-form-item>
      </el-form>
      </ContentWrap>
      <ContentWrap>
        <div class="table-content">
        <el-table
          v-loading="loadingMeasurePoint"
          :data="measurePointTableList"
          class="n-table--border"
          border
          highlight-current-row
          style="width: 100%;"
          height="auto">
          <el-table-column
            show-overflow-tooltip
            type="selection"
            align="center"
            width="55"/>
          <el-table-column prop="measurePointName" label="测量点名称"/>
          <el-table-column prop="measureProtocolName" label="协议名称"/>
          <el-table-column
            header-align="center"
            align="center"
            label="操作">
            <template #default="scope">
              <div class="flex items-center justify-center">
                <el-button v-hasPermi="['measure:point:query']" type="primary" link size="small" @click="viewMeasurePoint(scope.row.id)">查看</el-button>
                <el-button v-hasPermi="['measure:point:edit']" type="primary" link size="small" @click="editMeasurePoint(scope.row.id)">修改</el-button>
                <el-button v-hasPermi="['measure:point:delete']" type="primary" link size="small" @click="delMeasurePoint(scope.row.id)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <Pagination
          :total="measurePointTotal"
          v-model:page="queryMeasurePointParam.pageNo"
          v-model:limit="queryMeasurePointParam.pageSize"
          @pagination="onMeasureQuery"
        />
      </div>
      </ContentWrap>
    </div>
  </div>

  <!-- 表单弹窗：添加/修改 -->
  <DtuInfoForm ref="dtuInfoFormRef" @success="onDtuQuery" />
  <MeasurePointInfoForm ref="measurePointInfoFormRef" @success="onMeasureQuery" />
</template>
<script setup lang="ts">
import { getDtuPage,deleteDtuInfo } from '@/api/measure/config/dtu'
import DtuInfoForm from "./dtu/DtuInfoForm.vue"
import MeasurePointInfoForm from "./point/MeasurePointInfoForm.vue"
import { MeasurePointInfoApi, MeasurePointInfo } from '@/api/measure/config/point'

defineOptions({ name: 'MeasurePointConfig' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const dtuInfoFormRef = ref()
const measurePointInfoFormRef = ref()
const queryPointFormRef = ref()
// data
const dtuTableList = ref([])
const dtuTotal = ref(0)
const measurePointTableList = ref([])
const loading = ref(false)
const loadingMeasurePoint = ref(false)
const measurePointTotal = ref(0)
const queryMeasurePointParam = reactive({
  measurePointName: undefined,
  measureProtocolName: undefined,
  dtuInfoId: undefined,
  pageNo: 1,
  pageSize: 10
})
const queryDtuParam = reactive({
  dtuName: undefined,
  pageNo: 1,
  pageSize: 10
})


// 自定义函数
const onDtuQuery = async () => {
  console.debug('查询DTU数据')
  loading.value = true
  try{
    let data = await getDtuPage(queryDtuParam)
    dtuTableList.value = data.list
    dtuTotal.value = data.total
  }finally {
    loading.value = false
  }
}
const onMeasureQuery = async () => {
  console.debug('查询测量点数据')
  loadingMeasurePoint.value = true
  try {
    const data = await MeasurePointInfoApi.getMeasurePointInfoPage(queryMeasurePointParam)
    measurePointTableList.value = data.list
    measurePointTotal.value = data.total
  } finally {
    loadingMeasurePoint.value = false
  }
}
const openAddDtuDialog = () => {
  console.debug('打开新增dtu窗口')
  dtuInfoFormRef.value.open('create')
}
const viewDtu = (id) => {
  console.debug('打开查看dtu窗口', id)
  dtuInfoFormRef.value.open('detail', id)
}
const editDtu = (id) => {
  console.debug('打开编辑dtu窗口', id)
  dtuInfoFormRef.value.open('update', id)
}
const delDtu = async (id) => {
  console.debug('确认删除dtu', id)
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await deleteDtuInfo(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await onDtuQuery()
  } catch {}
}
const openAddMeasurePointDialog = () => {
  console.debug('打开新增测量点窗口')
  measurePointInfoFormRef.value.open('create')
}
const viewMeasurePoint = (id) => {
  console.debug('打开查看测量点窗口', id)
  measurePointInfoFormRef.value.open('detail', id)
}
const editMeasurePoint = (id) => {
  console.debug('打开编辑测量点窗口', id)
  measurePointInfoFormRef.value.open('update', id)
}
const delMeasurePoint = async (id) => {
  console.debug('确认删除测量点', id)
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await MeasurePointInfoApi.deleteMeasurePointInfo(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await onMeasureQuery()
  } catch {}
}
const updatePointDtuId = (row, col, event) => {
  console.debug(row, col, event, row.id)
  queryMeasurePointParam.dtuInfoId = row.id
  onMeasureQuery()
}
/** 重置按钮操作 */
const resetQuery = () => {
  queryPointFormRef.value.resetFields()
  onMeasureQuery()
}

</script>
<style scoped lang="scss">
.measurePointPage {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-gap: 20px;
}
.left {
  display: flex;
  flex-direction: column;
}
.right {
  display: flex;
  flex-direction: column;
}
.table-content{
  flex-grow: 1;
  overflow: hidden;
  height: auto;
  display: flex;
  flex-direction: column;
}

</style>
